<template>
    <div class="paper-outline">
        <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" width="700px" :close-on-click-modal="false"
            :before-close="handleDialogClose" append-to-body>
            <template #title>
                <div class="dialog-title">数据来源及要求</div>
            </template>
            <div class="project-form">
                <el-form ref="dialogFormRef" class="form-container" label-width="0px">
                    <!-- 内容采集要求 -->
                    <div class="form-row">
                        <div class="form-item full-width">
                            <span class="label-wrap">内容采集要求</span>
                            <div class="tag-container">
                                <div class="tags-wrap">
                                    <el-tag v-for="(tag, idx) in tempResearchTags" :key="idx" closable
                                        @close="tempResearchTags.splice(idx, 1)" size="small" class="tag-item">
                                        {{ tag }}
                                    </el-tag>
                                </div>
                                <div class="input-add-group">
                                    <el-input v-model="newResearchTag" placeholder="自定义标签" class="custom-input"
                                        size="small" @input="handleTagInput" maxlength="50" />
                                    <el-button type="primary" size="small"
                                        @click="addTag('tempResearchTags', 'newResearchTag')" class="add-btn">
                                        添加
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 数据来源 -->
                    <div class="form-row">
                        <div class="form-item full-width">
                            <span class="label-wrap">数据来源</span>
                            <div class="tag-container">
                                <div class="tags-wrap">
                                    <el-tag v-for="(tag, idx) in tempWebsiteTags" :key="idx" closable
                                        @close="tempWebsiteTags.splice(idx, 1)" size="small" class="tag-item">
                                        {{ tag }}
                                    </el-tag>
                                    <el-tag v-for="(item, idx) in tempKnowledgeFileTags" :key="idx" closable
                                        @close="removeTempKnowledgeFile(idx)" size="small" class="tag-item file-tag">
                                        {{ item.fileName }}
                                        <i class="el-icon-document el-icon--right" title="已上传文件"></i>
                                    </el-tag>
                                </div>
                                <div class="input-upload-group">
                                    <div class="input-add-group knowledge-input-group">
                                        <el-input v-model="newWebsiteTag" placeholder="自定义网站标签" class="custom-input"
                                            size="small" @input="handleTagInput" maxlength="38" />
                                        <el-button type="primary" size="small"
                                            @click="addTag('tempWebsiteTags', 'newWebsiteTag')" class="add-btn">
                                            添加
                                        </el-button>
                                    </div>
                                    <el-upload ref="uploadRef" class="knowledge-upload" :action="uploadUrl"
                                        :headers="uploadHeaders" :on-success="handleTempFileUploadSuccess"
                                        :on-remove="handleTempFileRemove" :before-remove="confirmTempFileRemove"
                                        :limit="5" :on-exceed="handleFileExceed" size="small" :auto-upload="true"
                                        :before-upload="beforeFileUpload">

                                    </el-upload>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
            <template #footer>
                <el-button @click="handleDialogClose">取消</el-button>
                <el-button type="primary" @click="handleConfirm">确定</el-button>
            </template>
        </el-dialog>

        <div class="chapter-scroll-container">
            <el-form ref="paperFormRef" :model="formData.paperOutline" :rules="formRules" class="form-container"
                label-width="0px">
                <div v-for="(chapter, chapterIdx) in chapters" :key="chapterIdx" class="chapter-item">
                    <div class="form-item chapter-name-item">
                        <span class="label-wrap required">
                            <span class="required-mark">*</span>
                            <span class="label-text">章节名称</span>
                        </span>
                        <el-form-item :prop="`chapters[${chapterIdx}].chapterName`" :rules="formRules.chapterName"
                            class="el-form-item__custom chapter-name-input">
                            <el-input v-model="chapter.chapterName" placeholder="请输入章节名称" size="small"
                                class="form-input" style="background: #fff;" @input="debouncedUpdate" maxlength="70" />
                        </el-form-item>
                        <el-button type="text" icon="el-icon-delete" class="delete-btn chapter-delete-btn"
                            @click="deleteChapter(chapterIdx)" size="small">
                            删除
                        </el-button>
                    </div>

                    <div class="chapter-card">
                        <div class="content-table">
                            <div class="table-header">
                                <div class="col-header required">
                                    <span class="required-mark">*</span>
                                    <span class="label-text">内容标题</span>
                                </div>
                                <div class="col-header required">
                                    <span class="required-mark">*</span>
                                    <span class="label-text">数据来源</span>
                                </div>
                                <div class="col-header required">
                                    <span class="required-mark">*</span>
                                    <span class="label-text">内容采集要求</span>
                                </div>
                                <div class="col-header" style="width: 80px; text-align: center;">
                                    <span class="label-text"></span>
                                </div>
                            </div>

                            <div v-for="(row, rowIdx) in chapter.rows" :key="rowIdx" class="table-row">
                                <div class="form-item" style="flex: 1;">
                                    <el-form-item :prop="`chapters[${chapterIdx}].rows[${rowIdx}].contentTitle`"
                                        :rules="formRules.contentTitle" class="el-form-item__custom">
                                        <el-input v-model="row.contentTitle" placeholder="请输入内容标题" size="small"
                                            class="form-input" style="background: #fff;" @input="debouncedUpdate"
                                            maxlength="100" />
                                    </el-form-item>
                                </div>

                                <div class="form-item" style="flex: 1;">
                                    <el-form-item :prop="`chapters[${chapterIdx}].rows[${rowIdx}].dataSource`"
                                        :rules="formRules.dataSource" class="el-form-item__custom">
                                        <el-input v-model="row.dataSource" placeholder="请输入数据来源" size="small"
                                            class="form-input" style="background: #fff;" @input="debouncedUpdate"
                                            maxlength="200">
                                            <template #append>
                                                <img src="@/assets/images/input_add.png" alt="添加" class="input-add-icon"
                                                    @click="openDialog(chapter, row, chapterIdx, rowIdx)">
                                            </template>
                                        </el-input>
                                    </el-form-item>
                                </div>

                                <div class="form-item" style="flex: 1;">
                                    <el-form-item :prop="`chapters[${chapterIdx}].rows[${rowIdx}].collectionReq`"
                                        :rules="formRules.collectionReq" class="el-form-item__custom">
                                        <el-input v-model="row.collectionReq" placeholder="请输入采集要求" size="small"
                                            class="form-input" style="background: #fff;" @input="debouncedUpdate"
                                            maxlength="300">
                                            <template #append>
                                                <img src="@/assets/images/input_add.png" alt="添加" class="input-add-icon"
                                                    @click="openDialog(chapter, row, chapterIdx, rowIdx)">
                                            </template>
                                        </el-input>
                                    </el-form-item>
                                </div>

                                <div class="form-item"
                                    style="width: 80px; display: flex; align-items: center; justify-content: center;">
                                    <el-button type="text" icon="el-icon-delete" class="delete-btn row-delete-btn"
                                        @click="deleteRow(chapter, rowIdx)" size="small">
                                        删除
                                    </el-button>
                                </div>
                            </div>

                            <div class="add-row-btn-wrap">
                                <img src="@/assets/images/icon_added.png" alt="添加" class="add-icon">
                                <el-button type="text" @click="addRow(chapter)" class="add-row-btn">
                                    添加标题
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </el-form>
        </div>

        <el-button type="primary" size="small" class="add-chapter-btn" @click="addChapter">
            新增章节
        </el-button>
    </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { detailList } from '@/api/whitepaper/myproject'
const debounce = (fn, delay) => {
    let timer = null;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, args), delay);
    };
};

import { addChapter } from '@/api/whitepaper/myproject'

export default {
    name: "PaperOutline",
    props: {
        formData: {
            type: Object,
            required: true,
            default: () => ({
                paperOutline: {
                    chapters: [
                        {
                            chapterName: "",
                            rows: [{ contentTitle: "", dataSource: "", collectionReq: "" }]
                        }
                    ]
                }
            })
        },
        projectId: { type: Number, default: 0 }
    },
    data() {
        return {
            formRules: {
                chapterName: [
                    { required: true, message: "请输入章节名称", trigger: ["blur", "change"] },
                    { max: 70, message: "章节名称长度不超过70个字符", trigger: ["blur", "change"] }
                ],
                contentTitle: [
                    { required: true, message: "请输入内容标题", trigger: ["blur", "change"] },
                    { max: 100, message: "内容标题长度不超过100个字符", trigger: ["blur", "change"] }
                ],
                dataSource: [
                    { required: true, message: "请输入数据来源", trigger: ["blur", "change"] },
                    { max: 200, message: "数据来源长度不超过200个字符", trigger: ["blur", "change"] }
                ],
                collectionReq: [
                    { required: true, message: "请输入内容采集要求", trigger: ["blur", "change"] },
                    { max: 300, message: "采集要求长度不超过300个字符", trigger: ["blur", "change"] }
                ]
            },
            dialogVisible: false,
            tempResearchTags: [],
            tempWebsiteTags: [],
            tempKnowledgeFileTags: [],
            newResearchTag: "",
            newWebsiteTag: "",
            currentChapterIdx: -1,
            currentRowIdx: -1,
            baseApi: process.env.VUE_APP_BASE_API,
            uploadUrl: `${process.env.VUE_APP_BASE_API}/system/oss/file/upload`,
            uploadHeaders: {
                Authorization: `Bearer ${getToken()}`
            },
            lastUpdateTime: Date.now(),
            debouncedUpdate: null,
            chaptersCache: [],
            fileMaxSize: 5,
            isLoading: false,
            // 新增：接口请求锁，防止重复请求
            isOutlineLoading: false
        };
    },
    computed: {
        chapters() {
            const targetChapters = this.formData.paperOutline?.chapters || [];
            if (targetChapters.length === this.chaptersCache.length &&
                targetChapters.every((chap, idx) => chap.rows.length === this.chaptersCache[idx]?.rows.length)) {
                return this.chaptersCache;
            }
            this.chaptersCache = targetChapters.map(chapter => {
                if (!chapter.rows || chapter.rows.length === 0) {
                    chapter.rows = [{ contentTitle: "", dataSource: "", collectionReq: "" }];
                }
                return chapter;
            });
            return this.chaptersCache;
        }
    },
    watch: {
        projectId: {
            immediate: true,
            handler: debounce(function (newVal) {
                if (newVal && !this.isOutlineLoading) {
                    this.loadOutlineData();
                }
            }, 300)
        },
        "$store.getters.token": {
            handler() {
                this.uploadHeaders.Authorization = `Bearer ${getToken()}`;
            }
        }
    },
    created() {
        this.debouncedUpdate = debounce(() => {
            const now = Date.now();
            if (now - this.lastUpdateTime > 800) {
                this.lastUpdateTime = now;
                const emitData = {
                    ...this.formData,
                    paperOutline: {
                        ...this.formData.paperOutline,
                        chapters: [...this.formData.paperOutline.chapters]
                    }
                };
                this.$emit('update:formData', emitData);
            }
        }, 800);
    },
    mounted() {
    },
    methods: {
        async loadOutlineData() {
            if (!this.projectId || this.isOutlineLoading) return;
            this.isOutlineLoading = true; // 上锁
            try {
                const res = await detailList({ projectId: this.projectId });
                if (res.code === 200 && Array.isArray(res.data)) {
                    if (res.data.length > 0) {
                        this.formData.paperOutline.chapters = res.data.map(chapter => ({
                            chapterName: chapter.chapterName || "",
                            rows: chapter.outlineList?.map(outline => ({
                                contentTitle: outline.title || "",
                                dataSource: outline.dataSource || "",
                                collectionReq: outline.collectionRequirements || ""
                            })) || [{ contentTitle: "", dataSource: "", collectionReq: "" }]
                        }));
                    } else {
                        this.formData.paperOutline.chapters = [
                            { chapterName: "", rows: [{ contentTitle: "", dataSource: "", collectionReq: "" }] }
                        ];
                    }
                    this.chaptersCache = [...this.formData.paperOutline.chapters];
                } else {
                    this.$message.warning(res.msg || "未获取到有效大纲数据");
                }
            } catch (err) {
                let errorMsg = "加载章节数据失败：";
                if (err.response?.data?.msg) errorMsg += err.response.data.msg;
                else if (err.message.includes('Network Error')) errorMsg += '网络错误';
                else if (err.response?.status === 401) errorMsg += '未授权（Token失效）';
                else errorMsg += '系统未知错误';
                this.$message.error(errorMsg);
            } finally {
                this.isOutlineLoading = false; // 解锁
            }
        },

        // 表单校验
        validate(callback) {
            this.$refs.paperFormRef?.validate(callback);
        },

        // 新增章节
        addChapter() {
            this.formData.paperOutline.chapters.push({
                chapterName: "",
                rows: [{ contentTitle: "", dataSource: "", collectionReq: "" }]
            });
            this.debouncedUpdate();
        },

        // 删除章节
        deleteChapter(chapterIdx) {
            this.$confirm(`确定删除该章节吗？删除后章节内所有标题数据也会一并删除`, '确认删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.formData.paperOutline.chapters.splice(chapterIdx, 1);
                this.chaptersCache = [...this.formData.paperOutline.chapters];
                this.debouncedUpdate();
                this.$message.success('章节删除成功');
            }).catch(() => {
                this.$message.info('已取消删除');
            });
        },

        // 新增标题行
        addRow(chapter) {
            chapter.rows.push({
                contentTitle: "",
                dataSource: "",
                collectionReq: ""
            });
            this.debouncedUpdate();
        },

        // 删除标题行
        deleteRow(chapter, rowIdx) {
            this.$confirm('确定删除该标题吗？', '确认删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                chapter.rows.splice(rowIdx, 1);
                if (chapter.rows.length === 0) {
                    chapter.rows.push({ contentTitle: "", dataSource: "", collectionReq: "" });
                }
                this.debouncedUpdate();
                this.$message.success('标题删除成功');
            }).catch(() => {
                this.$message.info('已取消删除');
            });
        },

        // 打开弹窗
        openDialog(chapter, row, chapterIdx, rowIdx) {
            this.currentChapterIdx = chapterIdx;
            this.currentRowIdx = rowIdx;
            this.tempResearchTags = row.collectionReq
                ? [...row.collectionReq.split(',').map(tag => tag.trim()).filter(Boolean)]
                : [];
            const allTags = row.dataSource ? row.dataSource.split(',').map(tag => tag.trim()).filter(Boolean) : [];
            this.tempWebsiteTags = allTags.filter(tag =>
                !this.tempKnowledgeFileTags.some(file => file.fileName === tag)
            );
            this.newResearchTag = "";
            this.newWebsiteTag = "";
            this.dialogVisible = true;
        },

        addTag(tagArrKey, inputKey) {
            const val = this[inputKey].trim();
            const maxLength = inputKey === 'newResearchTag' ? 100 : 200;
            if (val && val.length <= maxLength && !this[tagArrKey].includes(val)) {
                this[tagArrKey].push(val);
                this[inputKey] = "";
            }
        },

        // 弹窗确认：拼接数据回显到表单
        handleConfirm() {
            if (this.currentChapterIdx < 0 || this.currentRowIdx < 0) return;
            const targetChapter = this.formData.paperOutline.chapters[this.currentChapterIdx];
            const targetRow = targetChapter.rows[this.currentRowIdx];

            targetRow.collectionReq = this.tempResearchTags.join(', ') || "";

            const dataSourceTags = [...this.tempWebsiteTags];
            this.tempKnowledgeFileTags.forEach(file => {
                dataSourceTags.push(file.fileName);
            });
            targetRow.dataSource = dataSourceTags.join(', ') || "";

            this.debouncedUpdate();
            setTimeout(() => {
                this.dialogVisible = false;
                this.tempResearchTags = [];
                this.tempWebsiteTags = [];
                this.tempKnowledgeFileTags = [];
                this.currentChapterIdx = -1;
                this.currentRowIdx = -1;
            }, 100);
        },


        // 关闭弹窗：清空临时数据
        handleDialogClose() {
            this.dialogVisible = false;
            this.tempResearchTags = [];
            this.tempWebsiteTags = [];
            this.tempKnowledgeFileTags = [];
            this.currentChapterIdx = -1;
            this.currentRowIdx = -1;
            this.newResearchTag = "";
            this.newWebsiteTag = "";
        },

        handleTagInput() { },

        // 提交章节数据到接口
        async submitChapters() {
            return new Promise((resolve, reject) => {
                this.validate(async (valid) => {
                    if (!valid) {
                        this.$message.error('请完善章节信息后提交');
                        reject(new Error('表单验证失败'));
                        return;
                    }
                    if (!this.projectId) {
                        this.$message.error('项目ID为空，无法提交');
                        reject(new Error('项目ID为空'));
                        return;
                    }

                    try {
                        const submitData = {
                            whitePaperChapterList: this.formData.paperOutline.chapters.map(chapter => ({
                                projectId: this.projectId,
                                chapterName: chapter.chapterName,
                                outlineList: chapter.rows.map(row => {
                                    const allDataSourceTags = row.dataSource ? row.dataSource.split(',').map(tag => tag.trim()).filter(Boolean) : [];
                                    const websites = allDataSourceTags.filter(tag =>
                                        !this.tempKnowledgeFileTags.some(file => file.fileName === tag)
                                    ).join(', ');
                                    const knowledgeBaseList = this.tempKnowledgeFileTags.map(file => ({
                                        originFileName: file.originFileName || file.fileName,
                                        fileUrl: file.fileUrl
                                    }));
                                    return {
                                        title: row.contentTitle,
                                        collectionRequirements: row.collectionReq,
                                        dataSourceInfo: {
                                            websites,
                                            knowledgeBaseList
                                        }
                                    };
                                })
                            }))
                        };

                        console.log('提交的章节数据:', JSON.stringify(submitData, null, 2));

                        const res = await addChapter(submitData);
                        console.log('接口响应:', res);

                        if (res.code === 200) {
                            this.$message.success('章节数据提交成功');
                            this.tempKnowledgeFileTags = [];
                            resolve(res);
                        } else {
                            const errorMsg = res.msg || '章节提交失败';
                            this.$message.error(errorMsg);
                            reject(new Error(errorMsg));
                        }
                    } catch (err) {
                        console.error('章节提交详细错误:', err);
                        let errorMsg = "章节提交失败：";
                        if (err.response?.data?.msg) {
                            errorMsg += err.response.data.msg;
                            console.error('后端错误信息:', err.response.data);
                        } else if (err.message.includes('Network Error')) {
                            errorMsg += '网络错误，请检查网络连接';
                        } else if (err.response?.status === 401) {
                            errorMsg += '未授权（Token失效），请重新登录';
                        } else if (err.response?.status === 500) {
                            errorMsg += '服务器内部错误';
                        } else {
                            errorMsg += err.message || '系统未知错误';
                        }
                        this.$message.error(errorMsg);
                        reject(err);
                    }
                });
            });
        }
    }
};
</script>

<style scoped>
.chapter-scroll-container {
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

::v-deep .chapter-scroll-container::-webkit-scrollbar,
::v-deep .tag-container .tags-wrap::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::v-deep .chapter-scroll-container::-webkit-scrollbar-thumb,
::v-deep .tag-container .tags-wrap::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #ccc;
}

::v-deep .chapter-scroll-container::-webkit-scrollbar-track,
::v-deep .tag-container .tags-wrap::-webkit-scrollbar-track {
    background-color: transparent;
}

::v-deep .tag-container .tags-wrap {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

::v-deep .el-upload__tip {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.add-chapter-btn {
    margin: 10px 0;
    position: relative;
    z-index: 10;
}

.paper-outline {
    padding: 15px;
    background-color: #ffffff !important;
}

.form-container {
    background-color: #ffffff !important;
}

.chapter-item {
    margin-bottom: 20px;
    background-color: #ffffff !important;
}

.form-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: transparent !important;
    position: relative;
}

.chapter-name-item {
    width: 100%;
    margin-bottom: 20px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.chapter-name-input {
    flex: 1;
}

.chapter-name-item .form-input {
    width: 30%;
}

.label-wrap {
    display: inline-flex;
    align-items: center;
}

.required-mark {
    color: red !important;
    margin-right: 4px;
    font-size: 14px;
    line-height: 1;
}

.label-text {
    color: #333;
    font-size: 14px;
    line-height: 1;
}

.table-header .col-header {
    display: inline-flex;
    align-items: center;
}

.form-input {
    width: 100%;
    height: 36px;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid #e2e7f0 !important;
}

.input-add-icon {
    width: 12px;
    height: 12px;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
}

::v-deep .el-input-group__append,
::v-deep .el-input-group__prepend {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    pointer-events: none;
}

::v-deep .el-input-group__append .input-add-icon {
    pointer-events: auto;
}

.chapter-card {
    background-color: #f5f7fa;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}

.content-table {
    width: 100%;
}

.table-header {
    display: flex;
    gap: 25px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
}

.col-header {
    flex: 1;
}

/* 操作列样式 */
.table-header .col-header:last-child {
    flex: none;
    width: 80px;
    text-align: center;
}

.table-row {
    display: flex;
    gap: 25px;
    margin-bottom: 20px;
}

.add-row-btn-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
}

.add-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.add-row-btn {
    color: #1e60fa;
    padding: 0;
    font-size: 14px;
}

.el-form-item__custom {
    margin-bottom: 0 !important;
    background-color: transparent !important;
}

::v-deep .el-form-item__error {
    color: red !important;
    font-size: 12px !important;
    line-height: 1 !important;
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    z-index: 10 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 删除按钮样式 */
.delete-btn {
    color: #ff4d4f;
    transition: color 0.2s;
    padding: 0 10px;
}

.delete-btn:hover {
    color: #ff7875;
}

.chapter-delete-btn {
    margin-left: 10px;
}

.row-delete-btn {
    padding: 0 10px;
}

/* 弹窗相关样式 */
.project-form {
    width: 100%;
    background-color: #fff;
    padding: 15px 0;
}

.form-row {
    margin-bottom: 25px;
}

.form-item.full-width {
    width: 100%;
}

.tag-container {
    width: 100%;
    min-height: 130px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    flex: 1;
    padding-bottom: 5px;
}

.tag-item {
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    white-space: normal !important;
    max-width: calc(50% - 10px);
}

.tag-item.file-tag {
    background-color: #e8f4f8;
    border-color: #409eff;
}

.input-upload-group {
    display: flex;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
}

.input-add-group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
}

.knowledge-input-group {
    max-width: calc(100% - 90px);
}

.custom-input {
    flex: 1;
    height: 32px;
    background-color: #f5f7fa !important;
    border-radius: 4px;
}

.add-btn {
    width: 80px;
    height: 32px;
    padding: 0;
}

.upload-btn {
    width: 80px;
    height: 32px;
    padding: 0;
}

.knowledge-upload {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 12px;
}

::v-deep .custom-input .el-input__inner {
    border: 1px solid #e4e7ed !important;
    box-shadow: none !important;
    height: 32px;
    line-height: 32px;
}

.dialog-title {
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    margin-bottom: 10px;
}

::v-deep .el-dialog__wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    pointer-events: auto;
}

::v-deep .el-dialog {
    margin: 0 auto !important;
    position: static !important;
    transform: none !important;
    max-height: calc(100vh - 80px) !important;
    overflow: auto !important;
    margin-top: 120px !important;
}

::v-deep .el-dialog__body {
    padding: 0 20px !important;
}

::v-deep .el-dialog__footer {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 15px 0 !important;
}

::v-deep .knowledge-upload .el-upload-list {
    display: none !important;
}
</style>